<script setup>
import Tabbar from '@/components/Tabbar.vue'
import { useState } from '@/hooks/useState'
import { onMounted, reactive, ref, watch } from 'vue';
import axios from 'axios';

const { state } = useState()
const formData = reactive({
  id_card_num: '',
  mobile: ''
})
// const list = ref([]);
const loading = ref(false);

function handleQuery(params) {
  const query = params || formData
  if(!query.id_card_num || !query.mobile) {
    return ''
  }
  if(!params) {
    loading.value = true
  }
  axios.post('http://xiaoe-58686-9-1256166615.sh.run.tcloudbase.com/order/query', query).then(res => {
    if(res.data.data) {
      state.list = res.data.data
      state.userInfo = res.data.data.length ? query : ''
    } else {
      state.list = []
      state.userInfo = ''
    }
  }).catch(error => {
    console.log(error)
  }).finally(() => {
    loading.value = false
  })
}
onMounted(() => {
  if(state.userInfo && !state.list?.length) {
    handleQuery(typeof state.userInfo === 'object' ? state.userInfo : JSON.parse(state.userInfo))
  }
})
</script>

<template>
  <!-- <iframe :src="state.config.queryorder" style="border-width: 0px;width: 100vw;height: 92vh;overflow:visible;">
  </iframe> -->
  <!-- <van-nav-bar
    title="查询订单"
  /> -->
  <template v-if="!state.list">
    <van-form @submit="handleQuery()">
      <van-cell-group inset style="margin-top: 100px; border-radius: 20px;overflow: hidden;">
        <van-field
          v-model="formData.mobile"
          required
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }, { pattern: /1\d{10}/, message: '请输入正确手机号' }]"
        />
        <van-field
          v-model="formData.id_card_num"
          required
          clearable
          label="身份证"
          placeholder="请输入身份证"
          :rules="[{ required: true, message: '请输入身份证'}, { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证'}]"
        />
      </van-cell-group>
      <van-row type="flex" justify="center">
        <van-button native-type="submit" style="width: 80%;margin-top: 20px;" size="normal" type="primary" round :loading="loading">查询</van-button>
      </van-row>
    </van-form>
  </template>
  <template v-else>
    <van-empty v-if="!state.list.length" description="没有查询到订单" />
    <div v-for="item in state.list" :key="item.id" class="card">
      <div style="font-weight: bold; border-bottom: 1px solid #ccc; padding: 8px 0;">{{ item.product_sku }}</div>
      <div><label>订单号：</label>{{ item.id }}</div>
      <div style="color: red;">订单状态：{{ item.status }}</div>
      <div><label>收件人：</label>{{ item.address_name }}</div>
      <div><label>物流公司：</label>{{ item.company || '-' }}</div>
      <div><label>物流单号：</label>{{ item.tracking_number || '-' }}</div>
    </div>
    <van-row type="flex" justify="center">
      <van-button style="width: 80%;margin-bottom: 20px;" size="normal" type="primary" round @click="state.list = null">更换查询手机号码</van-button>
    </van-row>
  </template>
  <Tabbar :activeMenu="2"/>
</template>

<style scoped lang="less">
.card {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 10px;
  div {
    padding: 3px 0;
    label {
      display: inline-block;
      width: 5em;
      text-align: right;
    }
  }
}
</style>
